<!-- icon弹窗选择器 -->
<template>
  <BaseDialog v-model="dialogVisible" title="Icon图标大全" width="1000">
    <el-tabs v-model="tabCategory" type="border-card">
      <el-tab-pane name="iconfont图标" label="iconfont图标">
        <div class="icon_wrap">
          <div class="icon_item" v-for="icon in data" :key="icon.code">
            <svg
              class="svg_icon_wrap"
              aria-hidden="true"
              @click="iconCLick(icon)"
            >
              <use :xlink:href="icon.code"></use>
            </svg>
            <div class="name">{{ icon.name }}</div>
            <div class="code-name">{{ icon.code }}</div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </BaseDialog>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import iconData from "./component/iconData.ts";
import "./component/iconfont-1.js";
const props = defineProps({
  modelValue: { type: Boolean, defalut: false },
  code: { type: String }
});
const emits = defineEmits(["update:modelValue", "update:code"]);
let dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits("update:modelValue", val);
  }
});

let data = computed(() => {
  return [...iconData];
});

const tabCategory = ref("iconfont图标");

/**
 * 点击图标
 */
const iconCLick = (icon) => {
  console.log(icon, "icon");
  dialogVisible.value = false;
  emits("update:code", icon.code);
};
</script>

<style lang="less" scoped>
.icon_wrap {
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;
  .icon_item {
    width: 100px;
    text-align: center;
    .svg_icon_wrap {
      font-size: 40px;
      width: 1em;
      height: 100px;
      transition: font-size 0.25s linear, width 0.25s linear;
      cursor: pointer;
      &:hover {
        font-size: 80px;
      }
    }
  }
}
</style>
